<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu {
            --front: #275EFE;
            --back: #D93757;
            --icon: white;
            perspective: 600px;
            width: 48px;
            height: 48px;
            position: relative;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            input {
                display: none;
                & + div {
                    span {
                        --rotateY: 0deg;
                        --background: var(--front);
                        transform: rotateY(var(--rotateY));
                        transform-style: preserve-3d;
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        background: var(--background);
                        backface-visibility: hidden;
                        transition: transform .6s cubic-bezier(.2, .64, .48, 1.24);
                        &:before,
                        &:after {
                            --rotate: 0deg;
                            content: '';
                            position: absolute;
                            width: 16px;
                            height: 2px;
                            border-radius: 1px;
                            top: 50%;
                            left: 50%;
                            background: var(--icon);
                            backface-visibility: hidden;
                            transform: translate(-50%, -50%) rotate(var(--rotate)) translateZ(6px);
                        }
                        &:first-child {
                            --background: var(--back);
                            &:before {
                                --rotate: -45deg;
                            }
                            &:after {
                                --rotate: 45deg;
                            }
                        }
                        &:last-child {
                            --rotateY: 180deg;
                            &:before {
                                box-shadow: 0 -5px 0 var(--icon), 0 5px 0 var(--icon);
                            }
                            &:after {
                                display: none;
                            }
                        }
                    }
                }
                &:checked + div {
                    span {
                        &:first-child {
                            --rotateY: -180deg;
                        }
                        &:last-child {
                            --rotateY: 0deg;
                        }
                    }
                }
            }
        }

        html {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        * {
            box-sizing: inherit;
            &:before,
            &:after {
                box-sizing: inherit;
            }
        }

        /*// Center & dribbble*/
           body {
               min-height: 100vh;
               display: flex;
               justify-content: center;
               align-items: center;
               background: #F5F9FF;
               .dribbble {
                   position: fixed;
                   display: block;
                   right: 20px;
                   bottom: 20px;
                   img {
                       display: block;
                       height: 28px;
                   }
               }
           }
    </style>
</head>
<body>
<label class="menu">
    <input type="checkbox" checked>
    <div>
        <span></span>
        <span></span>
    </div>
</label>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/6350574-Hamburger-switch-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
</body>
</html>